<template>
  <div class='logregister'>
     <van-nav-bar
      title="注册"
      left-arrow
      @click-left="onClickLeft"
    />
<van-form validate-first @failed="onFailed">
  <van-cell-group>
      <van-field v-model="useName"
      left-icon="smile-o"
      label="账号"
      placeholder="请输入账号"
      />

      <van-field v-model="useNick"
      left-icon="smile-o"
      label="昵称"
      placeholder="请输入昵称" 
      />
    
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="usePwd"
        type="password"
        left-icon="closed-eye"
        label="密码"
        name="pattern"
        placeholder="最少6位数"
      />
      <!-- 通过 validator 进行异步函数校验 -->
      <van-field
        v-model="confirmPwd"
        type="password"
        left-icon="closed-eye"
        label="确认密码"
        name="asyncValidator"
        placeholder="最少6位数"
      />
      <!-- 通过 validator 进行函数校验 -->
      <van-field
        v-model="usePhone"
        name="validator"
        label="手机号"
        placeholder="请输入11位数"
        maxlength="11"
        left-icon="phone-circle-o"
      />
  
      <van-field
        v-model="code"
        center
        clearable
        left-icon="phone-circle-o"
        label="短信验证码"
        placeholder="短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" :disabled="sendCodeDisable" @click="sendCode">{{sendCodeDisable?`${count}秒后可重新发送`:'发送验证码'}}</van-button>
        </template>
      </van-field>

      <van-field name="checkbox" label="性别" left-icon="friends-o">
        <template #input>
          <van-radio-group v-model="useSex" direction="horizontal" style="margin-left：20px;">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
  </van-cell-group>

      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          @click="Register"
          native-type="submit"
        >
        注册
        </van-button>
        <van-button type="primary" to="/User" size='mini'>已有账号,去登陆!</van-button>
      </div>
  </van-form>
  </div>
</template>
<script>
export default {
 data() {
    return {
      sendCodeDisable:false,
      count:60,
      useNick: '',
      useName: '',
      usePwd: '',
      confirmPwd: '',
      useEmail:'',
      usePhone:'',
      code:'',
      useSex:'男',
      pattern: /\d{6}/,
      flag:true,
      validatorSuc:true
    }
  },
  methods: {
    userBlur(type){
      switch (type) {
        case 'useNick':
          if(!this.useNick)this.flag=false
          if(this.useNick)this.flag=true
          break;
        case 'useName':
          if(!this.useName)this.flag=false
          if(this.useName)this.flag=true
          break;
      }
      if(this.flag)this.validatorSuc=false
    },
  // 返回上级
    onClickLeft() {
      this.$Toast('返回')
      this.$router.push('/User')
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      let reg=/1\d{10}/.test(val)
      // if(!reg) this.flag=false
      // if(this.reg)this.flag=true
      // if(this.flag)this.validatorSuc=false
      return reg
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      let reg=/\d{6}/.test(val)
      // this.$Toast.clear()
      // if(!reg) this.flag=false
      // if(reg)this.flag=true
      // if(this.flag)this.validatorSuc=false
      return reg
    },
    onFailed(errorInfo) {
      // console.log('failed', errorInfo)
    },
    async Register() {
      let prams ={
        'nick': this.useNick,
        'name': this.useName,
        'pwd':this.usePwd,
        'phone': this.usePhone,
        'email':'1465600345@qq.com',
        'sex':this.useSex,
        'code':this.code,
      }
      try {
        console.log(prams);
        const { data } = await this.$Api.apiUser.Register(prams)
          console.log(data)
          if (data.status == -200) return this.$Toast(data.msg)
          if(data.status == 200){
            this.$Toast('注册成功')
            this.$router.push('/User')
          } 
          
        } catch (error) {
          console.log('服务器异常',error)
        }
    },
    sendCode(){
      if(!this.usePhone) return this.$Toast('请先填写手机号')
      this.$Api.apiUser.getCode({phone:this.usePhone})
        .then(data=>{
          if (data.status == -200) return this.$Toast('注册失败')
          if(data.status == 200){
            let timer=null
            this.sendCodeDisable=true
            timer=setInterval(()=>{
              if( this.count<1){
                clearInterval(timer)
                this.count=60
                this.sendCodeDisable=false
              }else{
                this.count-=1
              }
            },1000)
          }
        })
        .catch(error=>{
          console.log('服务器异常',error)
        })    
    },

  },
    created() {
    //  console.log(this.Register)
    }
}
</script>
<style lang="less">
.van-form {
  margin: 0 8%;
  margin-top: 30%;
}
.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
}
.van-button--info {
  margin: 15% 0 5% 0;
  background:  rgb(255, 87, 119);
  border: none;
}
.van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 0px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
}
.van-button--mini{
  margin-left:35%;
  border: 0px;
  color: #0fcee0;
  background-color: #fff;
}
</style>
